<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <el-button type="primary" @click="$router.push({ path: 'animation' })">去动画页面</el-button>
    <el-button>
      <router-link to="/home">go to home</router-link>
    </el-button>
    <el-button type="primary" @click="goToTest">go to test</el-button>
    <el-button type="primary" @click="goToSearch">搜索页面</el-button>
    <h2 style="width: 300px; margin: 50px auto">{{ $store.state.text }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: '欢迎来到我的vue',
    };
  },
  created() {
    this.$store.dispatch("getText");
  },
  methods: {
    goToTest() {
      this.$router.push({
        // path: "test", //显示传参，刷新还有
        // query: {
        //   aaa: 111,
        //   bbb: 222,
        // }

        name: "test", //隐式传参，刷新没有
        params: {
          aaa: 111,
          bbb: 222,
        }
      });
    },
    goToSearch() {
      this.$router.push('/search');
    }
  },
};
</script>

<style scoped lang="less">
.hello {
  h1 {
    font-weight: normal;
    margin-bottom: 20px;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
}
</style>
